<template>
  <div class="py-75">
    <div text-center>
      <h1 text-35 mb-14>透明费用结构</h1>
      <div class="text-#5F6368 text-14 mb-62">简单合理的费率，助力您的业务发展</div>
    </div>
    <div class="flex gap-40 justify-center">
      <div class="box h-708 relative" v-for="(i, idx) in list" :key="idx">
        <div :style="i.bgStyle" class="h-192 pt-32 text-center">
          <div font-700 text-23 mb-9 class="text-#fff">{{ i.title }}</div>
          <div v-html="i.fee" h-56 mb-6></div>
          <div class="text-#fff">{{ i.subTitle }}</div>
        </div>
        <div pt-24 px-33>
          <div v-for="(i2, idx2) in i.list" :key="idx" class="fee-item h-48 flex items-center">
            <img src="@/assets/image/checked.png" class="w-14 mr-12" alt="" />
            <div text-14>
              {{ i2.text }}
            </div>
          </div>
        </div>
        <div absolute bottom-35 class="bottom">
          <el-button :type="i.btnType">{{ i.btnText }}</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
const list = reactive([
  {
    title: '微信/支付宝 接口费用',
    fee: `
    <div style="display: flex;justify-content: center;align-items: center">
      <div class="text-#797979 text-18 mr-10 font-700  relative top-5" style="text-decoration:line-through;">￥188</div>
      <div class="text-#FF0000 text-35 font-700">￥88</div>
      <div class="text-#fff text-14 relative top-8">/限时优惠开户</div>
    </div>
    `,
    subTitle: '初创企业首选',
    bgStyle: {
      'background-image': 'linear-gradient(117deg, #448BF5 0%, #99E1FF 100%)'
    },
    btnType: '',
    btnText: '立即开通',
    // 打钩的列表
    list: [
      {
        text: '交易费率 3.9% + $0.3'
      },
      {
        text: '单笔交易限额 ¥50,000'
      },
      {
        text: '月交易额上限 ¥500,000'
      },
      {
        text: '基础支付功能'
      },
      {
        text: '工作日客服支持'
      },
      {
        text: '标准结算周期 T+1'
      }
    ],
    // 点击按钮的事件
    toSubmit: () => {}
  },
  {
    title: '第三方支付接口',
    fee: `
    <div style="display: flex;justify-content: center;align-items: center">
      <div class="text-#797979 text-18 mr-10 font-700  relative top-5" style="text-decoration:line-through;">￥98</div>
      <div class="text-#FF0000 text-35 font-700">￥68</div>
      <div class="text-#fff text-14 relative top-8">/限时优惠开户</div>
    </div>
    `,
    subTitle: '成长型企业首选',
    bgStyle: {
      'background-image': 'linear-gradient(117deg, #009CDE 0%, #99DCFF 100%)'
    },
    btnType: 'primary',
    btnText: '立即开通',
    // 打钩的列表
    list: [
      {
        text: '交易费率 3.7% + $0.3'
      },
      {
        text: '单笔交易限额 ¥200,000'
      },
      {
        text: '月交易额上限 ¥5,000,000'
      },
      {
        text: '高级支付功能'
      },
      {
        text: '专属客户经理'
      },
      {
        text: '7×12小时客服支持'
      },
      {
        text: '实时结算 T+0'
      },
    ],
    // 点击按钮的事件
    toSubmit: () => {}
  },
  {
    title: '企业版',
    fee: `
    <div style="display: flex;justify-content: center;align-items: center">
      <div class="text-#fff text-35 font-700">定制</div>
    </div>
    `,
    subTitle: '大型企业首选',
    bgStyle: {
      'background-image': 'linear-gradient(117deg, #448BF5 0%, #3AC4FF 100%)'
    },
    btnType: '',
    btnText: '定制方案',
    // 打钩的列表
    list: [
      {
        text: ' 交易费率 3.4% + $0.3 起'
      },
      {
        text: '单笔交易限额 可定制'
      },
      {
        text: '月交易额无上限'
      },
      {
        text: '全套支付解决方案'
      },
      {
        text: '专属技术团队支持'
      },
      {
        text: '7×24小时优先支持'
      },
      {
        text: '定制化开发服务'
      },
    ],
    // 点击按钮的事件
    toSubmit: () => {}
  }
])
</script>

<style scoped lang="scss">
.box {
  width: 378px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid #eef2f7;
  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  .fee-item {
    border-bottom: 1px solid #f0f4f9;
  }
  .bottom {
    left: 50%;
    transform: translateX(-50%);
    .el-button {
      width: 98px;
      height: 38px;
      border-radius: 24px;
      font-size: 14px;
    }
  }
}
</style>
